<template>
	<view class="weather-container">
		<!-- 背景动画 -->
		<view class="weather-bg weather-bg-sunny">
			<view class="sun-animation">
				<image :src="weatherTypes" mode="widthFix" style="width: 100rpx;height: 100px;"></image>
			</view>
		</view>
		<!-- 顶部城市信息 -->
		<view class="header">
			<view class="location-info" @click="goToSearch">
				<text class="city-name">{{ currentCity.name }}</text>
				<text class="location-icon">📍</text>
			</view>
			<view class="refresh-btn" @click="refreshWeather">
				<text class="refresh-icon">🔄</text>
			</view>
		</view>

		<!-- 主要天气信息 -->
		<view class="main-weather" v-if="weatherData">
			<view class="temperature">
				<text class="temp-value">{{ weatherData.temperature }}</text>
				<text class="temp-unit">°C</text>
			</view>
			<view class="weather-desc">{{ weatherData.weather }}</view>
			<view class="weather-details">
				<view class="detail-item">
					<text class="detail-label">湿度</text>
					<text class="detail-value">{{ weatherData.humidity }}%</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">风向</text>
					<text class="detail-value">{{ weatherData.winddirection }}</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">风速</text>
					<text class="detail-value">{{ weatherData.windpower }}km/h</text>
				</view>
			</view>
		</view>

		<!-- 加载状态 -->
		<view class="loading-container" v-if="loading">
			<view class="loading-spinner"></view>
			<text class="loading-text">正在获取天气信息...</text>
		</view>

		<!-- 错误状态 -->
		<view class="error-container" v-if="error">
			<text class="error-icon">⚠️</text>
			<text class="error-text">{{ error }}</text>
			<button class="retry-btn" @click="refreshWeather">重试</button>
		</view>

		<!-- 底部信息 -->
		<view class="footer">
			<text class="update-time">更新时间: {{ updateTime }}</text>
		</view>
	</view>
</template>

<script>
import qing from '@/static/qing.svg'
import dayu from '@/static/dayu.svg'
import xue from '@/static/xue.svg'
import duoyun from '@/static/duoyun.svg'
import feng from '@/static/feng.svg'
import yin from '@/static/yin.svg'
import leibaodayu from '@/static/leibaodayu.svg'

export default {
	data() {
		return {
			currentCity: {
				name: '成都',
				province: '四川省',
				code: '510100'
			},
			weatherData: null,
			loading: false,
			error: null,
			updateTime: '',
			weatherType: '晴',
		}
	},

	computed: {
		weatherTypes() {
			const weatherMap = [
				{ key: '晴', icon: qing, },
				{ key: '阴', icon: yin, },
				{ key: '阵雨', icon: leibaodayu, },
				{ key: '雨', icon: dayu, },
				{ key: '多云', icon: duoyun, },
				{ key: '雪', icon: xue, }
			]
			const found = weatherMap.find(item => this.weatherType.includes(item.key))
			console.log(found)
			return found.icon || feng
		}

	},

	onLoad() {
		this.loadWeatherData();
	},

	methods: {
		// 加载天气数据
		async loadWeatherData() {
			this.loading = true;
			this.error = null;

			try {
				const response = await uni.request({
					url: `https://restapi.amap.com/v3/weather/weatherInfo`,
					method: 'GET',
					data: {
						key: 'dce2c9eba14e953f7635d576ae87a100',
						city: this.currentCity.code,
					}
				});
				this.weatherData = response.data.lives[0];
				this.weatherType = response.data.lives[0].weather
				this.updateTime = new Date().toLocaleString('zh-CN');
			} catch (error) {
				console.error('获取天气数据失败:', error);
				this.error = '获取天气信息失败，请检查网络连接';
			} finally {
				this.loading = false;
			}
		},
		// 刷新天气
		refreshWeather() {
			this.loadWeatherData();
		},

		// 跳转到搜索页面
		goToSearch() {
			uni.navigateTo({
				url: '/pages/search/search'
			});
		},

		// 更新城市（从搜索页面返回时调用）
		updateCity(city) {
			this.currentCity = city;
			this.loadWeatherData();
		}
	}
}
</script>

<style scoped>
.weather-container {
	min-height: 100vh;
	position: relative;
	overflow: hidden;
}

/* 背景样式 */
.weather-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.weather-bg-sunny {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}


/* 晴天动画 */
.sun-animation {
	position: absolute;
	top: 100rpx;
	right: 100rpx;
}

.sun {
	width: 120rpx;
	height: 120rpx;
	background: radial-gradient(circle, #ffd700, #ff8c00);
	border-radius: 50%;
	box-shadow: 0 0 40rpx #ffd700;
	animation: sunRotate 20s linear infinite;
}

.sun-rays {
	position: absolute;
	top: -20rpx;
	left: -20rpx;
	width: 160rpx;
	height: 160rpx;
	border: 4rpx solid rgba(255, 215, 0, 0.3);
	border-radius: 50%;
	animation: sunRays 3s ease-in-out infinite alternate;
}

@keyframes sunRotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes sunRays {
	from {
		transform: scale(1);
		opacity: 0.5;
	}

	to {
		transform: scale(1.2);
		opacity: 1;
	}
}

/* 雨天动画 */
.rain-animation {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.rain-drop {
	position: absolute;
	width: 4rpx;
	height: 40rpx;
	background: linear-gradient(to bottom, transparent, #87ceeb);
	border-radius: 0 0 4rpx 4rpx;
	animation: rainFall 1s linear infinite;
}

@keyframes rainFall {
	from {
		transform: translateY(-100rpx);
		opacity: 0;
	}

	to {
		transform: translateY(100vh);
		opacity: 1;
	}
}

/* 多云动画 */
.cloud-animation {
	position: absolute;
	top: 50rpx;
	width: 100%;
}

.cloud {
	position: absolute;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 100rpx;
	animation: cloudFloat 8s ease-in-out infinite;
}

.cloud1 {
	width: 200rpx;
	height: 80rpx;
	top: 50rpx;
	left: 10%;
	animation-delay: 0s;
}

.cloud2 {
	width: 150rpx;
	height: 60rpx;
	top: 150rpx;
	left: 60%;
	animation-delay: 2s;
}

.cloud3 {
	width: 180rpx;
	height: 70rpx;
	top: 250rpx;
	left: 30%;
	animation-delay: 4s;
}

@keyframes cloudFloat {

	0%,
	100% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(50rpx);
	}
}

/* 雪天动画 */
.snow-animation {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.snowflake {
	position: absolute;
	font-size: 24rpx;
	color: white;
	animation: snowFall 3s linear infinite;
}

@keyframes snowFall {
	from {
		transform: translateY(-50rpx) rotate(0deg);
		opacity: 0;
	}

	to {
		transform: translateY(100vh) rotate(360deg);
		opacity: 1;
	}
}

/* 主要内容 */
.header {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	padding: 60rpx 40rpx 40rpx;
}

.location-info {
	display: flex;
	align-items: center;
}

.city-name {
	font-size: 36rpx;
	color: white;
	font-weight: 600;
}

.location-icon {
	font-size: 32rpx;
}

.refresh-btn {
	margin-left: 10rpx;
}

.refresh-icon {
	font-size: 32rpx;
	color: white;
}

.main-weather {
	position: relative;
	z-index: 10;
	padding: 60rpx 40rpx;
	text-align: center;
}

.temperature {
	display: flex;
	align-items: baseline;
	justify-content: center;
	margin-bottom: 30rpx;
}

.temp-value {
	font-size: 120rpx;
	color: white;
	font-weight: 300;
}

.temp-unit {
	font-size: 60rpx;
	color: white;
	margin-left: 10rpx;
}

.weather-desc {
	font-size: 36rpx;
	color: white;
	margin-bottom: 60rpx;
}

.weather-details {
	display: flex;
	justify-content: space-around;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 20rpx;
	padding: 40rpx;
	backdrop-filter: blur(10rpx);
}

.detail-item {
	text-align: center;
}

.detail-label {
	display: block;
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 10rpx;
}

.detail-value {
	display: block;
	font-size: 32rpx;
	color: white;
	font-weight: 600;
}

/* 加载状态 */
.loading-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 20;
	text-align: center;
}

.loading-spinner {
	width: 80rpx;
	height: 80rpx;
	border: 6rpx solid rgba(255, 255, 255, 0.3);
	border-top: 6rpx solid white;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin: 0 auto 30rpx;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.loading-text {
	color: white;
	font-size: 28rpx;
}

/* 错误状态 */
.error-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 20;
	text-align: center;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20rpx;
	padding: 60rpx 40rpx;
}

.error-icon {
	font-size: 80rpx;
	display: block;
	margin-bottom: 30rpx;
}

.error-text {
	color: #333;
	font-size: 28rpx;
	margin-bottom: 40rpx;
	display: block;
}

.retry-btn {
	background: #4A90E2;
	color: white;
	border: none;
	border-radius: 50rpx;
	padding: 20rpx 40rpx;
	font-size: 28rpx;
}

/* 底部信息 */
.footer {
	position: absolute;
	bottom: 40rpx;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 10;
}

.update-time {
	color: rgba(255, 255, 255, 0.8);
	font-size: 24rpx;
}

/* 微信小程序适配 */
/* #ifdef MP-WEIXIN */
.header {
	padding-top: 80rpx;
}

/* #endif */

/* H5适配 */
/* #ifdef H5 */
.header {
	padding-top: 60rpx;
}

/* #endif */
</style>
